<template>
	<div class="contains">
		 <div class="login-header">
			  <image src="../../assets/images/register.png" mode=""></image>
			  <div class="logo"></div>
		 </div>
		 <div class="login-form">
			<div class="login-form-grop">
							   <div class="login-form-label">
								    <span>门店名称</span>
							   </div>
							   <div class="login-form-input_1">
								   <input type="text" value="" style="margin-top: 10px;" data-field="name" @input="handleInput" placeholder="门店名称"/>
							   </div>
			</div>
			  <div class="login-form-grop">
				   <div class="login-form-icon">
					    <image src="../../assets/images/icon-phone.png" mode=""></image>
				   </div>
				   <div class="login-form-input">
					    <input type="text" value="" data-field="mobile" @input="handleInput" placeholder="请输入手机号"/>
				   </div>
			  </div>
			  <div class="login-form-grop">
				   <div class="login-form-label">
					   <span>省市区</span>
				   </div>
				   <div class="login-form-input_1">
					   <div class="input-select">
						   <picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
						               @change="pickerChange" @columnchange="pickerColumnchange">
					        <div class="input-val">{{select}}</div>
							</picker>
					    </div>
				   </div>
			  </div>
			  <div class="login-form-grop">
				   <div class="login-form-label">
					   <span>经销商</span>
				   </div>
				   <div class="login-form-input_1">
					   <div class="input-select">
						   <picker class="pickerList"  :range="dealerDataList" :value="dealerIndex"
						               @change="pickerDealerChange">
					            <div class="input-val">经销商</div>
							</picker>
					    </div>
				   </div>
			 </div>
			 <div class="login-form-grop">
				   <div class="login-form-label">
					    <span>详细地址</span>
				   </div>
				   <div class="login-form-input_1">
					   <input type="text" value="" style="margin-top: 10px;" data-field="address" @input="handleInput" placeholder="详细地址"/>
				   </div>
			 </div>
			  <div class="login-form-grop" style="border-bottom: none; padding-top: 10px;">
				   <button type="default" @click = "toSubmit">立即申请</button>
			  </div>	  
		 </div>
	</div>
</template>

<script>
	import { shopRegister , dealerList } from '../../../api/index.js';
	import provinceData from "../../../utils/provinceAndCity.js"
	export default {
	  components:{
	  },
	  data(){
		 return {
			 is_login:false,
			 user:[],
			 oldpProvinceDataList: provinceData.data,
			 newProvinceDataList: [
				 [],
				 [],
				 []
			 ],
			 multiIndex: [0, 0, 0],
			 select: '选择省市区',
			 addressData: {
				 name: '',
				 phone: '',
				 address: ''
			 },
			 binhao: '1',
			 mobile:'',
			 address:'',
			 dealerDataList:[],
			 dealerIndex:0,
		 }
	  },
	  onShow() {
		 this.$Fun.checkLogin((res)=>{
		 });
	  },
	  created(){
		  this.getDealerList();
		  var _this = this
		              // 省
		  for (let i = 0; i < _this.oldpProvinceDataList.length; i++) {
			  _this.newProvinceDataList[0].push(_this.oldpProvinceDataList[i].name)
		  }
		  // 市
		  for (let i = 0; i < _this.oldpProvinceDataList[0].city.length; i++) {
			  _this.newProvinceDataList[1].push(_this.oldpProvinceDataList[0].city[i].name)
		  }
		  // 区县
		  for (let i = 0; i < _this.oldpProvinceDataList[0].city[0].area.length; i++) {
			  _this.newProvinceDataList[2].push(_this.oldpProvinceDataList[0].city[0].area[i])
		  }
	  },
	  mounted(){
	  },
	  methods:{
		handleInput(e){
		   var field = e.currentTarget.dataset.field;
		   switch(field){
			   case 'mobile':
			   this.mobile = e.detail.value;
			   break;
			   case 'name':
			   this.name = e.detail.value;
			   break;
			   case 'address':
			   this.address = e.detail.value;
			   break;
		   }		 
		},
		getDealerList(){
			dealerList().then(res=>{
				this.dealer = res.data;
                var dealerList = [];
				for (var i=0;i<res.data.length;i++){
					dealerList.push(res.data[i]['userName']);
				}
				this.dealerDataList = dealerList;
			})
		},  
		pickerDealerChange(e){
            var index = e.detail.value;
			this.dealerIndex = index;
		},
		toSubmit(){
			var form = {
				'province':this.newProvinceDataList[0][this.multiIndex[0]],
				'city':this.newProvinceDataList[1][this.multiIndex[1]],
				'region':this.newProvinceDataList[2][this.multiIndex[2]],
				'name':this.name,
				'mobile':this.mobile,
				'address':this.address,
				'dealerId':this.dealer[this.dealerIndex]['id']
			}
			shopRegister(form).then(res=>{
				if (res.code==200){
					uni.showToast({
						title:res.msg
					})
				}
			})
		},
		// 省市区确认事件
		pickerChange: function(e) {
			var _this = this
			_this.multiIndex = e.detail.value
			// 数组内的下标
			console.log(JSON.stringify(_this.multiIndex))
			// 获取省市区总数据
			console.log(_this.newProvinceDataList[0][_this.multiIndex[0]])
			console.log(_this.newProvinceDataList[1][_this.multiIndex[1]])
			console.log(_this.newProvinceDataList[2][_this.multiIndex[2]])
			_this.select =
				_this.newProvinceDataList[0][_this.multiIndex[0]] + "-" +
				_this.newProvinceDataList[1][_this.multiIndex[1]] + "-" +
				_this.newProvinceDataList[2][_this.multiIndex[2]]
		},
		// 每列滑动的监听
		pickerColumnchange: function(e) {
		                var _this = this
		                // 第几列滑动
		                console.log("第几列滑动 = " + JSON.stringify(e.detail.column))
		                // 第几列滑动选中的下标
		                console.log("第几列滑动选中的下标 = " + JSON.stringify(e.detail.value))
		                // 第一列滑动
		                if (e.detail.column === 0) {
		                    _this.multiIndex[0] = e.detail.value
		                    // 第二列更新相应的数据
		                    _this.newProvinceDataList[1] = _this.oldpProvinceDataList[_this.multiIndex[0]].city.map((item,
		                        index) => {
		                        return item.name
		                    })
		                    if (_this.oldpProvinceDataList[_this.multiIndex[0]].city.length === 1) {
		                        _this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[0].area
		                            .map((
		                                item,
		                                index) => {
		                                return item
		                            })
		                    } else {
		                        _this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[_this
		                            .multiIndex[
		                                1]].area.map((item, index) => {
		                            return item
		                        })
		                    }
		                    // 第一列滑动  第二列 和第三列 都变为第一个
		                    _this.multiIndex.splice(1, 1, 0)
		                    _this.multiIndex.splice(2, 1, 0)
		                }
		                // 第二列滑动
		                if (e.detail.column === 1) {
		                    _this.multiIndex[1] = e.detail.value
		                    _this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[_this.multiIndex[
		                        1]].area.map((item, index) => {
		                        return item
		                    })
		                    // 第二列 滑动 第三列 变成第一个
		                    _this.multiIndex.splice(2, 1, 0)
		                }
		                // 第三列滑动
		                if (e.detail.column === 2) {
		                    _this.multiIndex[2] = e.detail.value
		                }
		            }
	  },
	};
</script>

<style>
	.login-header { position: relative; width: 100%;}
	.login-header image { width: 100%;}
	.logo { width: 60px; height: 60px; background: red; border-radius: 30px; position: absolute; top: 20%; left: 50%; margin-left: -30px;}
	.login-form { width: 85%; padding-top: 20px; margin: 0 auto;}
	.login-form-grop { position: relative; width: 100%; height: 50px; margin-bottom: 10px; border-bottom: 1px solid #eee;}
	.input-select { width: 60%; height: 30px; margin-top: 5px; float: right;}
	.input-val { float: right; height: 30px; line-height: 30px; color: #666;}
	.login-form-label { display: inline-block; vertical-align: top; width: 80px; line-height: 30px; margin-top: 5px; height: 30px;}
	.login-form-input { width: 100%; height: 50px;}
	.login-form-input_1 { display: inline-block; width: 70%; height: 50px;}
	.login-form-input input { padding-left: 10%; width: 90%; height: 50px; line-height: 50px; }
	.login-form-icon { width: 23px; height: 30px;  position: absolute; top: 10px; left: 5px;}
	.login-form-icon image { width: 100%; height: 100%;}
	.login-form-grop button { background: #214bfa; color: aliceblue;}
	.login-form-grop p { text-align: center; color: #214bfa; margin-top: 10px;}
	.third-passport { margin-top: 50px; text-align: center; }
	.third-passport .third-item { width: 50px; height: 46px; margin: 0 30px; display: inline-block;}
	.third-passport .third-item image { width: 100%; height: 100%;}
</style>